<template>
  <!-- 新增部门的弹层 -->
  <el-dialog
    :title="title"
    :visible="showDialog"
    @close="hCancle"
  >
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <!-- 当弹层存在才能创建表单，就可以解决点击空白处，再次点开表单出现的错误校验bug -->
    <el-form
      v-if="showDialog"
      ref="addDepts"
      label-width="120px"
      :model="fromData"
      :rules="rules"
    >
      <el-form-item
        label="部门名称"
        prop="name"
      >
        <el-input
          v-model.trim="fromData.name"
          style="width:80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item
        label="部门编码"
        prop="code"
      >
        <el-input
          v-model.trim="fromData.code"
          style="width:80%"
          placeholder="1-50个字符"
        />
      </el-form-item>
      <el-form-item
        label="部门负责人"
        prop="manager"
      >
        <el-select
          v-model="fromData.manager"
          style="width:80%"
          placeholder="请选择"
          @focus="hgetEmployees"
          @blur="hcheckManager"
        >
          <el-option
            v-for="item in employees"
            :key="item.id"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="部门介绍"
        prop="introduce"
      >
        <el-input
          v-model.trim="fromData.introduce"
          style="width:80%"
          placeholder="1-300个字符"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row
      slot="footer"
      type="flex"
      justify="center"
    >
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button
          type="primary"
          size="small"
          @click="hAddDepts"
        >确定</el-button>
        <el-button
          size="small"
          @click="hCancle"
        >取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments, addDepartments, getDeptList, editDeptList } from '@/api/departments'
import { getEmployeesEL } from '@/api/employees'
export default {
  props: {
    showDialog: {
      require: true,
      default: false
    },
    currentNode: {
      require: true,
      default () { // 因为对象属于引用类型，此处默认返回一个空对象，可以不受父组件传进来的对象影响
        return {}
      }
    }
  },
  data () {
    // 部门规则校验
    const checkNameVld = async (rule, val, callback) => {
      const { depts } = await getDepartments()
      // console.log(depts)
      let res = false
      if (this.fromData.id) {
        console.log(123)
        res = depts.filter(item => item.pid === this.currentNode.pid && item.id !== this.fromData.id)// 依据pid找到所有同一父级部门下的子部门，如果名字相同则提示，不同则继续
          .some(item => item.name === val)
      } else {
        res = depts.filter(item => item.pid === this.currentNode.pid)// 依据pid找到所有同一父级部门下的子部门，如果名字相同则提示，不同则继续
          .some(item => item.name === val)
      }

      // console.log(this.currentNode)
      // console.log(res)
      res ? callback('同一级下部门名称不能相同') : callback()
    }
    // 部门编码规则校验
    const checkCodeVld = async (rule, val, callback) => {
      const { depts } = await getDepartments()
      // console.log(depts)
      let res = false
      if (this.fromData.id) {
        res = depts.some(item => item.code === val && val && item.id !== this.fromData.id) // 部门编码不能重复,并且val必须有值
      } else {
        res = depts.some(item => item.code === val && val) // 部门编码不能重复
      }

      res ? callback('部门编码已被使用，请重新确认编码') : callback()
    }
    return {

      employees: [],
      fromData: {
        name: '',
        code: '',
        manager: '',
        introduce: ''

      },
      rules: {
        name: [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
        { trigger: 'blur', validator: checkNameVld }
        ],
        code: [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
        { trigger: 'blur', validator: checkCodeVld }],
        manager: { required: true, message: '内容不能为空', trigger: 'blur' },
        introduce: [{ required: true, message: '内容不能为空', trigger: 'blur' },
        { min: 1, max: 300, message: '请输入1-300个字符', trigger: 'blur' }]
      }
    }
  },
  computed: {
    title () {
      return this.fromData.id ? '编辑部门' : '添加部门'
    }
  },
  methods: {
    async hgetEmployees () {
      const res = await getEmployeesEL()
      // console.log(res)
      this.employees = res
    },
    // 下拉框校验
    // 1、手动添加失去焦点事件
    // 2、通过from表单的部分字段监听函数监听负责人校验
    // 3、由于失去焦点先于点击事件赋值触发，所以有值时也会提示
    // 4、给失去焦点添加延时器，等待赋值后再进行校验
    hcheckManager () {
      setTimeout(() => {
        this.$refs.addDepts.validateField('manager')
      }, 100)
    },
    async hAddDepts () {
      if (this.fromData.id) {
        console.log(123)
        try {
          await editDeptList(this.fromData)
          this.$message.success('修改成功')
        } catch (error) {
          console.log(error)
        }
      } else {
        console.log(456)
        try {
          // 添加子部门
          // 1、先进行表单验证，使用try catch包裹
          // 2、验证通过后在发送请求
          // 3、更新数据
          // 4、关闭弹层
          await this.$refs.addDepts.validate()

          const data = { ...this.fromData, pid: this.currentNode.id }
          console.log(data)
          await addDepartments(data)
          this.$message.success('添加成功')
        } catch (error) {
          console.log(error)
        }
      }
      this.$emit('update-depts')
      this.$emit('update:show-dialog', false)
    },
    hCancle () {
      this.fromData = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      // 取消按钮
      // 1、清除表单内容
      // 2、关闭弹层
      this.$refs.addDepts.resetFields()
      this.$emit('update:show-dialog', false)
    },
    async deptsList (id) {
      // console.log(id)
      this.fromData = await getDeptList(id)
      // console.log(res)
    }
  }

}
</script>

